import React, { useState, useEffect, useRef, useCallback } from 'react';
import styles from './AboutPage.module.css';

const AboutPage: React.FC = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [isLoaded, setIsLoaded] = useState(false);
  const [activeCard, setActiveCard] = useState<number | null>(null);

  const containerRef = useRef<HTMLDivElement>(null);

  // 生成动态粒子
  const generateParticles = () => {
    const particles = [];
    for (let i = 0; i < 60; i++) {
      particles.push({
        id: i,
        x: Math.random() * 100,
        y: Math.random() * 100,
        size: Math.random() * 3 + 1,
        speed: Math.random() * 2 + 0.5,
        delay: Math.random() * 5
      });
    }
    return particles;
  };

  const particles = generateParticles();

  // 鼠标移动追踪
  const handleMouseMove = useCallback((e: MouseEvent) => {
    setMousePosition({
      x: (e.clientX / window.innerWidth) * 100,
      y: (e.clientY / window.innerHeight) * 100
    });
  }, []);

  // 酷炫文字点击处理
  const handleAvatarClick = useCallback(() => {
    // 可以在这里添加点击效果
    console.log('酷炫文字被点击了！');
  }, []);

  // 初始化效果
  useEffect(() => {
    setIsLoaded(true);
    document.addEventListener('mousemove', handleMouseMove);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, [handleMouseMove]);

  // 技能数据
  const skillCategories = [
    {
      id: 'frontend',
      title: '前端技术栈',
      icon: 'code',
      skills: ['React & TypeScript', 'Vue.js & Nuxt.js', 'CSS3 & Sass', 'Webpack & Vite'],
      color: 'from-blue-500 to-cyan-500'
    },
    {
      id: 'backend',
      title: '后端 & 系统',
      icon: 'server',
      skills: ['Node.js & Python', 'Docker & K8s', 'MySQL & Redis', 'Linux & DevOps'],
      color: 'from-green-500 to-emerald-500'
    },
    {
      id: 'hardware',
      title: '硬件玩具库',
      icon: 'chip',
      skills: ['ESP32 & ESP8266', 'Arduino 系列', '树莓派 & 传感器', '3D打印 & 电路设计'],
      color: 'from-purple-500 to-pink-500'
    },
    {
      id: 'ai',
      title: 'AI & 机器学习',
      icon: 'brain',
      skills: ['深度学习框架', '自然语言处理', '计算机视觉', 'AI应用开发'],
      color: 'from-orange-500 to-red-500'
    }
  ];

  // 项目导航数据
  const projects = [
    {
      name: 'Python IDE',
      url: 'https://www.hanlinbo.cn/python-ide/',
      description: '在线Python开发环境',
      icon: 'code'
    },
    {
      name: 'ESP32 启动板',
      url: 'https://www.hanlinbo.cn/launchpad/',
      description: '物联网开发工具',
      icon: 'chip'
    },
    {
      name: '聊天室',
      url: 'https://chatbox.hanxiaoxin.cn/',
      description: '实时通讯平台',
      icon: 'chat'
    },
    {
      name: '小智AI平台',
      url: 'https://xiaozhi.hanxiaoxin.cn/',
      description: '智能AI助手',
      icon: 'brain'
    },
    {
      name: '马里奥时钟',
      url: 'https://www.hanlinbo.cn/mario/',
      description: '创意时钟应用',
      icon: 'clock'
    }
  ];

  // 获取图标
  const getIcon = (iconType: string) => {
    const iconProps = {
      fill: "none",
      stroke: "currentColor",
      viewBox: "0 0 24 24",
      strokeWidth: 2
    };

    switch (iconType) {
      case "code":
        return (
          <svg {...iconProps}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
          </svg>
        );
      case "server":
        return (
          <svg {...iconProps}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
          </svg>
        );
      case "chip":
        return (
          <svg {...iconProps}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
          </svg>
        );
      case "brain":
        return (
          <svg {...iconProps}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
        );
      case "chat":
        return (
          <svg {...iconProps}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        );
      case "clock":
        return (
          <svg {...iconProps}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        );
      default:
        return null;
    }
  };

  return (
    <div className={`${styles.container} ${isLoaded ? styles.loaded : ''}`} ref={containerRef}>
      {/* 动态背景粒子 */}
      <div className={styles.particleField}>
        {particles.map(particle => (
          <div
            key={particle.id}
            className={styles.particle}
            style={{
              left: `${particle.x}%`,
              top: `${particle.y}%`,
              width: `${particle.size}px`,
              height: `${particle.size}px`,
              animationDelay: `${particle.delay}s`,
              animationDuration: `${particle.speed + 3}s`
            }}
          />
        ))}
      </div>

      {/* 鼠标跟随光效 */}
      <div 
        className={styles.mouseGlow}
        style={{
          left: `${mousePosition.x}%`,
          top: `${mousePosition.y}%`
        }}
      />

      {/* 主内容区域 */}
      <div className={styles.mainContent}>
        {/* 个人简介区域 */}
        <section className={styles.heroSection}>
          <div className={styles.heroContent}>
            <div className={styles.profileInfo}>
              {/* 简洁高级文字名字 */}
              <div 
                className={styles.coolName}
                onClick={handleAvatarClick}
              >
                <div className={styles.nameText}>韩小信</div>
              </div>
              <p className={styles.profileTitle}>前端工程师 & ESP32 极客 & AI 探索者</p>
              <p className={styles.profileBio}>
                一个对ESP32有着迷之热爱的前端工程师 🤖，擅长让网页和硬件谈恋爱，
                用AI当红娘。白天写React让浏览器开心，晚上玩ESP32让LED闪烁，
                梦想是打造一个能用语音控制的智能语言学习硬件 —— 
                让你的单词卡片会发光、会说话、还会在你偷懒时震动提醒！
              </p>
            
                {/* 社交链接 */}
            <div className={styles.socialLinks}>
                  <a href="https://github.com/hanxiaoxin" className={styles.socialLink} target="_blank" rel="noopener noreferrer" title="GitHub">
                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                </svg>
              </a>
                  <a href="https://space.bilibili.com/1635947791" className={styles.socialLink} target="_blank" rel="noopener noreferrer" title="Bilibili">
                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267c.053-.071.116-.142.187-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .653.124.92.373l.027.027c.249.249.373.551.373.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.789 1.894v7.52c.02.764.283 1.396.789 1.894.507.497 1.134.755 1.88.773h13.334c.746-.018 1.373-.276 1.88-.773.506-.498.769-1.13.789-1.894v-7.52c-.02-.765-.283-1.396-.789-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.249.249.373.56.373.933v.853c0 .373-.124.684-.373.933a1.28 1.28 0 0 1-.933.373c-.373 0-.684-.124-.933-.373a1.28 1.28 0 0 1-.373-.933v-.853c0-.373.124-.684.373-.933.249-.249.56-.373.933-.373zm8 0c.373 0 .684.124.933.373.249.249.373.56.373.933v.853c0 .373-.124.684-.373.933a1.28 1.28 0 0 1-.933.373c-.373 0-.684-.124-.933-.373a1.28 1.28 0 0 1-.373-.933v-.853c0-.373.124-.684.373-.933.249-.249.56-.373.933-.373z"/>
                </svg>
              </a>
                  <a href="tencent://message/?uin=573322978&Site=&Menu=yes" className={styles.socialLink} title="QQ">
                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12.017 0C5.396 0 .029 4.826.029 10.777c0 3.356 1.701 6.355 4.378 8.313.208.152.331.406.331.677 0 .069-.015.135-.039.199l-.815 2.199c-.114.308-.004.651.249.808.101.063.218.094.336.094.165 0 .331-.06.456-.175l2.52-2.282c.165-.149.379-.232.602-.232.088 0 .177.011.265.032 1.035.247 2.141.375 3.281.375 6.624 0 11.99-4.826 11.99-10.777C24.007 4.826 18.641.001 12.017.001zM8.29 14.26c-.324 0-.639-.13-.870-.361-.23-.23-.361-.546-.361-.87s.131-.639.361-.870c.231-.23.546-.361.87-.361s.639.131.87.361c.23.231.361.546.361.87s-.131.639-.361.87c-.231.23-.546.361-.87.361zm7.451 0c-.324 0-.639-.13-.870-.361-.23-.23-.361-.546-.361-.87s.131-.639.361-.870c.231-.23.546-.361.87-.361s.639.131.87.361c.23.231.361.546.361.87s-.131.639-.361.87c-.231.23-.546.361-.87.361z"/>
                </svg>
              </a>
                  <a href="mailto:573322978@qq.com" className={styles.socialLink} title="Email">
                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-.904.732-1.636 1.636-1.636h.749L12 10.724l9.615-6.903h.749c.904 0 1.636.732 1.636 1.636z"/>
                </svg>
              </a>
            </div>
          </div>
        </div>
        </section>

        {/* 技能展示区域 */}
        <section className={styles.skillsSection}>
          <div className={styles.sectionHeader}>
            <h2 className={styles.sectionTitle}>技术能力</h2>
            <p className={styles.sectionSubtitle}>多元化技术栈与创新实践</p>
          </div>
          
          <div className={styles.skillsGrid}>
            {skillCategories.map((category, index) => (
              <div 
                key={category.id} 
                className={`${styles.skillCard} ${activeCard === index ? styles.active : ''}`}
                onMouseEnter={() => setActiveCard(index)}
                onMouseLeave={() => setActiveCard(null)}
              >
                <div className={styles.cardHeader}>
            <div className={styles.cardIcon}>
                    {getIcon(category.icon)}
                  </div>
                  <h3 className={styles.cardTitle}>{category.title}</h3>
            </div>
                
                <div className={styles.skillsList}>
                  {category.skills.map((skill, skillIndex) => (
                    <div key={skillIndex} className={styles.skillItem}>
                <div className={styles.skillDot}></div>
                      <span className={styles.skillText}>{skill}</span>
                    </div>
                  ))}
          </div>
          
                <div className={styles.cardGlow}></div>
            </div>
            ))}
          </div>
        </section>

        {/* 项目导航区域 */}
        <section className={styles.projectsSection}>
          <div className={styles.sectionHeader}>
            <h2 className={styles.sectionTitle}>项目作品</h2>
            <p className={styles.sectionSubtitle}>创意与技术的完美融合</p>
        </div>
        
          <div className={styles.projectsGrid}>
            {projects.map((project, index) => (
              <a 
                key={index}
                href={project.url} 
                className={styles.projectCard}
                target="_blank" 
                rel="noopener noreferrer"
              >
                <div className={styles.projectIcon}>
                  {getIcon(project.icon)}
                </div>
                <div className={styles.projectInfo}>
                  <h3 className={styles.projectName}>{project.name}</h3>
                  <p className={styles.projectDescription}>{project.description}</p>
                </div>
                <div className={styles.projectArrow}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
                </div>
                <div className={styles.projectGlow}></div>
              </a>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default AboutPage;